import 'package:flutter/material.dart';
import '../mock_data/mock_data.dart';
import '../widgets/page_indicator.dart';

/// 教程轮播页面
///
/// 以底部弹窗形式显示应用使用教程，支持左右滑动
class TutorialScreen extends StatefulWidget {
  const TutorialScreen({super.key});

  @override
  State<TutorialScreen> createState() => _TutorialScreenState();
}

class _TutorialScreenState extends State<TutorialScreen> {
  late PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    const tutorials = MockData.tutorialPages;
    final screenHeight = MediaQuery.of(context).size.height;

    return Container(
      height: screenHeight * 0.8, // 屏幕高度的80%
      decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
      ),
      child: Stack(
        children: [
          // 主内容区域
          Column(
            children: [
              // 顶部标题栏
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  children: [
                    Text(
                      tutorials[_currentPage].title,
                      style: const TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 16,
                        fontWeight: FontWeight.w500,
                        color: Color(0xFF000000),
                      ),
                    ),
                  ],
                ),
              ),

              // 教程内容区域
              Expanded(
                child: PageView.builder(
                  controller: _pageController,
                  onPageChanged: (index) {
                    setState(() {
                      _currentPage = index;
                    });
                  },
                  itemCount: tutorials.length,
                  itemBuilder: (context, index) {
                    final tutorial = tutorials[index];
                    return _buildTutorialPage(tutorial);
                  },
                ),
              ),

              // 底部区域：页面指示器 + 按钮
              Padding(
                padding: const EdgeInsets.only(
                  left: 24,
                  right: 24,
                  bottom: 24,
                ),
                child: Column(
                  children: [
                    // 页面指示器
                    PageIndicator(
                      currentPage: _currentPage,
                      pageCount: tutorials.length,
                    ),

                    const SizedBox(height: 24),

                    // 底部按钮
                    _buildBottomButton(),
                  ],
                ),
              ),
            ],
          ),

          // 右上角关闭按钮
          Positioned(
            top: 14,
            right: 16,
            child: GestureDetector(
              onTap: () => Navigator.pop(context),
              child: Container(
                width: 24,
                height: 24,
                decoration: BoxDecoration(
                  color: const Color(0xFFF2F4F7),
                  borderRadius: BorderRadius.circular(24),
                ),
                child: const Icon(
                  Icons.close,
                  size: 16,
                  color: Color(0xFF000000),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  /// 构建单个教程页
  Widget _buildTutorialPage(tutorial) {
    return SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: Column(
        children: [
          const SizedBox(height: 20),

          // 图示区域（浅灰色背景）
          Container(
            width: 335,
            height: 294,
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: const Color(0xFFF2F4F7),
              borderRadius: BorderRadius.circular(16),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // 设备图示
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    // iPhone手机
                    _buildDeviceItem(
                      Icons.phone_iphone,
                      'iPhone\n手机一部',
                      68,
                      147,
                    ),

                    // USB-C连接线
                    Column(
                      children: [
                        const SizedBox(height: 30),
                        _buildConnectionLines(),
                        const SizedBox(height: 8),
                        Container(
                          padding: const EdgeInsets.symmetric(
                            horizontal: 8,
                            vertical: 2,
                          ),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(4),
                          ),
                          child: const Text(
                            'MINI USB\n数据线',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              fontSize: 12,
                              fontWeight: FontWeight.w500,
                              color: Color(0xFF000000),
                              height: 1.3,
                            ),
                          ),
                        ),
                      ],
                    ),

                    // 相机转换器
                    _buildDeviceItem(
                      Icons.camera_alt,
                      '闪电转 USB 3\n相机转换器',
                      75,
                      160,
                    ),
                  ],
                ),

                const SizedBox(height: 12),

                // 已连接状态
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 4,
                  ),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Container(
                        width: 16,
                        height: 3,
                        decoration: BoxDecoration(
                          color: const Color(0xFFFF4E28),
                          borderRadius: BorderRadius.circular(2),
                        ),
                      ),
                      const SizedBox(width: 4),
                      Container(
                        width: 8,
                        height: 3,
                        decoration: BoxDecoration(
                          color: const Color(0xFF98A2B3),
                          borderRadius: BorderRadius.circular(2),
                        ),
                      ),
                      const SizedBox(width: 8),
                      const Text(
                        '已连接',
                        style: TextStyle(
                          fontFamily: 'PingFang SC',
                          fontSize: 10,
                          color: Color(0xFF181D28),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 24),

          // 步骤说明
          SizedBox(
            width: 188,
            child: Text(
              tutorial.description,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontFamily: 'PingFang SC',
                fontSize: 14,
                fontWeight: FontWeight.w400,
                color: Color(0xFF181D28),
                height: 1.3,
              ),
            ),
          ),

          const SizedBox(height: 56),

          // 注释
          Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(left: 12),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(
                    width: 15,
                    child: Text(
                      '注:',
                      style: TextStyle(
                        fontFamily: 'PingFang SC',
                        fontSize: 11,
                        color: Color(0xFF98A2B3),
                        height: 1.27,
                      ),
                    ),
                  ),
                  const SizedBox(width: 4),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: const [
                        Text(
                          '可以根据您的手机接口和相机接口自行准备数据线；\n闪电转 USB 3 相机转换器非必备工具，若您的相机和手机无法通过一根数据线直接连接时再选择准备闪电转 USB 3 相机转换器',
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            fontSize: 11,
                            color: Color(0xFF98A2B3),
                            height: 1.27,
                          ),
                        ),
                        SizedBox(height: 2),
                        Text(
                          '部分充电线不具备数据传输功能，请确保所选数据线具备数据传输功能',
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            fontSize: 11,
                            color: Color(0xFF98A2B3),
                            height: 1.27,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          const SizedBox(height: 56),

          // 查看完整教程链接
          GestureDetector(
            onTap: () {
              // 打开完整教程
            },
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: const [
                Text(
                  '查看完整教程',
                  style: TextStyle(
                    fontFamily: 'PingFang SC',
                    fontSize: 12,
                    color: Color(0xFF98A2B3),
                  ),
                ),
                SizedBox(width: 2),
                Icon(
                  Icons.arrow_forward_ios,
                  size: 12,
                  color: Color(0xFF98A2B3),
                ),
              ],
            ),
          ),

          const SizedBox(height: 24),
        ],
      ),
    );
  }

  /// 构建设备项
  Widget _buildDeviceItem(
      IconData icon, String label, double width, double height) {
    return Column(
      children: [
        Container(
          width: width,
          height: height * 0.6,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
          ),
          child: Icon(
            icon,
            size: 32,
            color: const Color(0xFF667085),
          ),
        ),
        const SizedBox(height: 12),
        SizedBox(
          width: width,
          child: Text(
            label,
            textAlign: TextAlign.center,
            style: const TextStyle(
              fontFamily: 'PingFang SC',
              fontSize: 12,
              fontWeight: FontWeight.w500,
              color: Color(0xFF000000),
              height: 1.3,
            ),
          ),
        ),
      ],
    );
  }

  /// 构建连接线图示
  Widget _buildConnectionLines() {
    return Row(
      children: [
        Container(
          width: 16,
          height: 2,
          color: const Color(0xFF667085),
        ),
        Container(
          width: 8,
          height: 8,
          decoration: const BoxDecoration(
            color: Color(0xFF667085),
            shape: BoxShape.circle,
          ),
        ),
        Container(
          width: 16,
          height: 2,
          color: const Color(0xFF667085),
        ),
      ],
    );
  }

  /// 构建底部按钮
  Widget _buildBottomButton() {
    const tutorials = MockData.tutorialPages;
    final isLastPage = _currentPage == tutorials.length - 1;

    if (isLastPage) {
      // 最后一页：显示"开始使用"按钮
      return SizedBox(
        width: double.infinity,
        height: 48,
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 只关闭弹窗
          },
          style: ElevatedButton.styleFrom(
            backgroundColor: const Color(0xFFFF4E28),
            foregroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(24),
            ),
            elevation: 0,
          ),
          child: const Text(
            '开始使用',
            style: TextStyle(
              fontFamily: 'PingFang SC',
              fontSize: 16,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      );
    } else {
      // 其他页：显示"跳过"按钮
      return TextButton(
        onPressed: () {
          _pageController.animateToPage(
            tutorials.length - 1,
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        child: const Text(
          '跳过',
          style: TextStyle(
            fontFamily: 'PingFang SC',
            fontSize: 16,
            color: Color(0xFF667085),
          ),
        ),
      );
    }
  }
}

/// 显示教程弹窗
void showTutorialBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    backgroundColor: Colors.transparent,
    builder: (context) => const TutorialScreen(),
  );
}
